<template>
	<view class="container">
		<view class="index-top">
			<view class="bg">
				<view class="bgimg">
					<image :src="http + shopData.bgimage" mode="aspectFill" v-if="shopData.bgimage"></image>
					<image src="@/static/image/bg.png" mode="aspectFill" v-else></image>
				</view>
				<view class="img">
					<image src="@/static/image/logo.png" mode="aspectFill"></image>
				</view>
				<view class="t">
					— 灶火通明守本味 · 明厨见心烹健康 —
				</view>
			</view>
			<view class="shop u-flex u-row-between u-col-top" v-if="shopData && shopData.id">
				<view class="l">
					<view class="name u-flex u-col-center" @click="$pageTo('/pages/index/changeShop')">
						<text>{{shopData.name}}</text>
						<image src="@/static/image/index1.png" mode="aspectFill"></image>
					</view>
					<view class="address u-l-1">
						{{shopData.address}}
					</view>
					<view class="distance" v-if="shopData.distance">
						距您{{shopData.distance.toFixed(2)}}km
					</view>
				</view>
				<view class="r">
					<view class="img">
						<image src="@/static/image/index2.png" mode="aspectFill"></image>
					</view>
					<view class="btn u-flex u-col-center u-row-center"
						@click="$pageTo(`/pages/index/shopData?id=${shopData.id}`)">
						<text>去瞧瞧</text>
						<image src="@/static/image/index3.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="index-kitchen">
			<view class="title u-flex u-col-bottom u-row-between">
				<view class="l">
					<text>透明后厨</text>
					<image src="@/static/image/index4.png" mode="aspectFill"></image>
				</view>
				<view class="r" @click="$pageTo(`/pages/index/shopData?id=${shopData.id}`)">
					<text>进店看看</text>
					<image src="@/static/image/index5.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in monitorList" :key="index"
					@click="$pageTo(`/pages/index/shopData?id=${shopData.id}`)">
					<image :src="item.picUrl" mode="aspectFill"></image>
					<!-- 	<view class="title">
						{{item.deviceName}}
					</view> -->
				</view>
				<!-- <view class="item item2" v-for="(item,index) in monitorList" :key="index">
					<view class="player" v-if="item.deviceSerial">
						<ezplayer id="ezplayer"
							accessToken="at.2l16n752dv1v1d02avvbt4cs5v6ktjm0-8adkmd6zk4-0sgzr7t-tdrslzb1i"
							:url="`rtmp://open.ys7.com/${item.deviceSerial}/${item.channelNo}/live`" plugins=""
							recPlayTime="" width="335" height="273" watermark="shuiyin" theme="" />
					</view>
				</view> -->
			</view>
			<view class="tips u-flex u-col-center u-row-center">
				<image src="@/static/image/index6.png" mode="aspectFill"></image>
				<text>工作再忙，也要好好吃饭哦~</text>
				<image src="@/static/image/index7.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="btn-order" @click="gotoOrder">
			<view class="t">
				开始点餐
			</view>
			<view class="p">
				Order Now
			</view>
		</view>
		<view class="index-ads">
			<view class="title">
				<text>平台公告</text>
				<image src="@/static/image/index4.png" mode="aspectFill"></image>
			</view>
			<view class="index-body" v-if="content">
				<u-parse :content="content"></u-parse>
			</view>
			<view class="index-body-no" v-else>
				<image src="../../static/image/nonotice.png" mode="aspectFill"></image>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				longitude: "",
				latitude: '',
				shopList: [],
				monitorList: [],
				uid: '',
				shopData: {
					id: ""
				},
				http: this.$imgUrl,
				accessToken: ''
			}
		},
		onLoad(o) {
			uni.setStorageSync('cartData', [])
		},
		onShow() {
			if (uni.getStorageSync('shopData')) {
				this.shopData = JSON.parse(uni.getStorageSync('shopData'))
			}
			this.getLocation()
			if (!uni.getStorageSync('uid')) {
				this.login()
			}
		},
		methods: {
			handleError(e) {
				console.log(111111111, e)
			},
			onControlEvent(e) {
				console.log(2222222222, e)
			},
			getLocation() {
				if (!uni.getStorageSync("lng")) {
					// 先检查是否已经授权定位权限
					uni.getSetting({
						success: (res) => {
							if (res.authSetting['scope.userLocation']) {
								// 已经授权，可以直接调用模糊定位
								console.log('已经授权，可以直接调用模糊定位')
								this.getLocation()
							} else {
								// 未授权，尝试申请权限
								console.log('未授权，尝试申请权限')
								uni.authorize({
									scope: 'scope.userLocation',
									success: () => {
										// 授权成功，再次调用模糊定位
										console.log('授权成功，再次调用模糊定位')
										this.getLocation()
									},
									fail: () => {
										// 用户拒绝授权，提示并引导去设置页开启权限
										console.log('用户拒绝授权，提示并引导去设置页开启权限')
										uni.showModal({
											title: '提示',
											content: '需要您开启定位权限才能使用该功能',
											success: (modalRes) => {
												if (modalRes.confirm) {
													uni.openSetting({
														success: (res2) => {
															if (res2
																.authSetting[
																	'scope.userLocation'
																]) {
																// 用户重新授权后再次调用
																console
																	.log(
																		'用户重新授权后再次调用'
																	)
																this.getLocation()
															} else {
																this.nolocation()
															}
														}
													});
												} else {
													this.nolocation()
												}
											}
										});
									}
								});
							}
						}
					});
				} else {
					this.nolocation()
				}
			}, //
			nolocation() {
				uni.setStorageSync("lng", '113.601513')
				uni.setStorageSync("lat", '34.746501')
				this.longitude = uni.getStorageSync("lng")
				this.latitude = uni.getStorageSync("lat")
				this.getHomeData()
			},

			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						uni.setStorageSync("lng", res.longitude)
						uni.setStorageSync("lat", res.latitude)
						this.longitude = uni.getStorageSync("lng")
						this.latitude = uni.getStorageSync("lat")
						this.getHomeData()
					},
					fail: (e) => {
						uni.setStorageSync("lng", '113.601513')
						uni.setStorageSync("lat", '34.746501')
						this.longitude = uni.getStorageSync("lng")
						this.latitude = uni.getStorageSync("lat")
						this.getHomeData()
					},
					complete: (err) => {
						console.log(err)
					}
				})
			},
			login() {
				uni.login({
					provider: 'weixin',
					success: (r) => {
						console.log(r)
						if (r.errMsg == 'login:ok') {
							this.$http.post('/app/indexs/login', {
								code: r.code,
							}).then(res => {
								if (res.code == 0) {
									if (res.data.id) {
										this.uid = res.data.id
										uni.setStorageSync('uid', res.data.id)
									} else {
										let openid = res.data.openid
										this.register(openid)
									}
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							}).catch(err => {
								console.log('表单错误信息：', err);
							})

						}
					},
					fail: (err) => {

					}
				})
			},
			register(openid) {
				this.$http.post('/app/indexs/register', {
					openid: openid,
					avatar: '',
					nickname: "",
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.uid = res.data.id
						uni.setStorageSync('uid', res.data.id)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			getHomeData() {
				this.$http.post('/app/homes/index', {
					longitude: this.longitude,
					latitude: this.latitude,
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.content = res.data.config.notice
						this.shopList = res.data.shopList
						this.monitorList = res.data.monitorList[0].channelList.filter(item => item.status == 1)
							.slice(0, 4)
						this.monitorList[0].picUrl = require('@/static/2.jpg')
						this.monitorList[1].picUrl = require('@/static/1.jpg')
						console.log(this.monitorList, 'this.monitorList11111111111111111111111111111')
						if (!uni.getStorageSync('shopData')) {
							this.shopData = this.shopList[0]
							uni.setStorageSync('shopData', JSON.stringify(this.shopData))
						}
						this.accessToken = res.data.accessToken

					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			gotoOrder() {
				uni.switchTab({
					url: '/pages/index/orderFood'
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	.index-ads {
		margin: 20rpx auto;
		width: calc(100% - 40rpx);
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;

		.index-body {
			margin-top: 40rpx;
			color: #7B7B7B;
			font-size: 28rpx;
			line-height: 40rpx;
		}

		.index-body-no {

			image {
				width: 320rpx;
				height: 300rpx;
				margin: 120rpx auto;
			}
		}

		.title {
			height: 50rpx;
			line-height: 50rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			text-align: left;
			position: relative;

			image {
				position: absolute;
				left: 40rpx;
				bottom: -8rpx;
				width: 52rpx;
				height: 12rpx;
			}
		}
	}

	.btn-order {

		width: 710rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #E51B00;
		border-radius: 50rpx;
		margin: 20rpx auto;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;

		.t {
			font-size: 30rpx;
			font-weight: 600;
			color: #fff;
			height: 50rpx;
			line-height: 50rpx;
		}

		.p {
			font-size: 18rpx;
			color: #fff;
			height: 30rpx;
			line-height: 30rpx;
		}
	}

	.index-kitchen {
		margin: 20rpx auto;
		width: calc(100% - 40rpx);
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;

		.tips {
			height: 40rpx;
			line-height: 40rpx;
			margin-top: 20rpx;

			image {
				width: 22rpx;
				height: 34rpx;
			}

			text {
				padding: 0 10rpx;
				font-size: 24rpx;
				color: #B5B5BB;
			}
		}

		.title {
			height: 48rpx;
			line-height: 48rpx;

			.l {


				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				text-align: left;
				position: relative;

				text {}

				image {
					position: absolute;
					left: 50%;
					bottom: -8rpx;
					width: 52rpx;
					height: 12rpx;
					margin-left: -22rpx;
				}
			}

			.r {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #B5B5BB;
				text-align: right;

				text {}

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.list {
			margin-top: 30rpx;
			width: 100%;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1rpx;
			border-radius: 12rpx;
			overflow: hidden;
			position: relative;
			font-family: PingFang SC, PingFang SC;

			.item {
				width: 100%;
				position: relative;
				height: 196rpx;

				video {
					width: 100%;
					height: 100%;
				}

				image {
					width: 100%;
					height: 100%;
				}

				.player {
					width: 100%;
					height: 100%;
					transform: scale(0.5) translate(-50%, -50%);
				}

				.title {
					position: absolute;
					top: 0;
					left: 20rpx;
					right: 20rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 16rpx;
					color: #fff;
					z-index: 999;
				}
			}
		}
	}

	.index-top {
		width: 750rpx;
		height: 720rpx;
		position: relative;
		border-radius: 0 0 40rpx 40rpx;
		overflow: hidden;
		font-family: PingFang SC, PingFang SC;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			z-index: 1;

			.bgimg {
				width: 750rpx;
				height: 720rpx;
				position: relative;
				z-index: 2;

				image {
					width: 100%;
					height: 100%;
				}

				&::after {
					content: '';
					position: absolute;
					inset: 0;
					background: linear-gradient(180deg, transparent 0%, rgba(242, 242, 242, 0.5) 20%, transparent 50%, transparent 100%), linear-gradient(180deg, transparent 0%, transparent 50%, rgba(140, 140, 140, 1) 80%, transparent 100%);

					// background: linear-gradient(180deg,  0%, rgba(242, 242, 242, 1) 20%,  rgba(140, 140, 140, 1) 80%, rgba(140, 140, 140, 0) 100%);
					z-index: 3;
					// opacity: 0.5;
				}
			}

			.img {
				position: absolute;
				left: 50%;
				bottom: 360rpx;
				margin-left: -193rpx;
				width: 387rpx;
				height: 128rpx;
				z-index: 44;


				image {
					width: 100%;
					height: 100%;
				}
			}

			.t {
				position: absolute;
				left: 20rpx;
				right: 20rpx;
				bottom: 300rpx;
				text-align: center;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 22rpx;
				color: #FFFFFF;
				z-index: 444;

			}

		}

		.shop {
			position: absolute;
			left: 20rpx;
			right: 20rpx;
			bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			z-index: 99;
			padding: 30rpx 20rpx 25rpx;
			font-family: PingFang SC, PingFang SC;

			.l {
				flex: 1;
				width: 1rpx;
				margin-right: 20rpx;

				.name {

					line-height: 44rpx;

					text {
						font-size: 32rpx;
						font-weight: 800;
						color: #000;
					}

					image {
						width: 40rpx;
						height: 40rpx;
						margin-left: 10rpx;
					}
				}

				.address {
					margin-top: 20rpx;
					line-height: 30rpx;

					font-size: 22rpx;
					color: #B1B1B1;
					text-align: left;
				}

				.distance {
					margin-top: 20rpx;
					line-height: 30rpx;

					font-size: 22rpx;
					color: #B1B1B1;
					text-align: left;
				}
			}

			.r {
				width: 250rpx;

				.img {
					width: 248rpx;
					height: 148rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.btn {
					margin-left: 20rpx;
					width: 140rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					background: #000000;
					border-radius: 40rpx;

					text {
						font-size: 24rpx;
						color: #fff;
					}

					image {
						width: 28rpx;
						height: 28rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>